import styles from './index.less';
import { Radio, Tooltip } from 'antd';
import React from 'react';
import { TIME_96 } from '@/pages/ETrade/components/helper';

export const tableColumn = [
  {
    code: 'time',
    name: '时间段',
    align: 'center',
    width: 120,
  },
  {
    code: 'dataSourceName',
    name: (
      <div className={styles.dataSourceId}>
        <div className={styles.ratio}>调整比例(%)</div>
        <div className={styles.predictSource}>基准预测源</div>
        <div className={styles.maxNum}>最大值</div>
        <div className={styles.minNum}>最小值</div>
      </div>
    ),
    width: 295,
    render(v, record) {
      return (
        <div className={styles.dataSourceIdShow}>
          <div className={styles.radio}>
            <Radio checked={record?.useType === 'dataSource'} disabled />
          </div>
          <div className={styles.ratio}>{record?.rateValue ?? 100}</div>
          <div className={styles.predictSource}>
            <Tooltip placement="topLeft" title={v}>
              {v}
            </Tooltip>
          </div>
          <div className={styles.maxNum}>{record?.maxValue ?? '0.000'}</div>
          <div className={styles.minNum}>{record?.minValue ?? '0.000'}</div>
        </div>
      );
    },
  },
  {
    code: 'fixedValue',
    name: (
      <div className={styles.fixedValue}>
        <div className={styles.radio}>{''}</div>
        <div className={styles.name}>固定值</div>
      </div>
    ),
    width: 100,
    render(v, record) {
      return (
        <div className={styles.fixedValueShow}>
          <div className={styles.radio}>
            <Radio checked={record?.useType === 'fixation'} disabled />
          </div>
          <div className={styles.fixedValueShowInput}>{record?.fixation ?? '0.000'}</div>
        </div>
      );
    },
  },
];

const hasDataTime = (index, arr = []) => {
  let value = {};
  arr.forEach((v) => {
    if (index >= v.beginIndex && index <= v.endIndex) {
      value = v;
    }
  });
  return value;
};

export const getOptions = (arr = []) => {
  const options = {
    grid: {
      top: 28,
      left: 46,
      bottom: 45,
      right: 46,
    },
    tooltip: {},
    legend: {
      orient: 'horizontal',
      bottom: 0,
      itemGap: 20,
      textStyle: {
        color: '#a7a8a9',
      },
      data: ['调整比例', '最大值', '最小值', '固定值'],
    },
    xAxis: [
      {
        type: 'category',
        data: TIME_96,
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: 'MW',
        axisLine: {
          show: false,
        },
      },
      {
        type: 'value',
        name: '%',
        axisLine: {
          show: false,
        },
      },
    ],
  };
  const series = [];
  const data = {
    rateValue: {
      name: '调整比例',
      type: 'line',
      data: [],
      color: '#5E92F6',
      props: {
        yAxisIndex: 1,
      },
    },
    maxValue: {
      name: '最大值',
      type: 'line',
      data: [],
      color: '#E86452',
    },
    minValue: {
      name: '最小值',
      type: 'line',
      data: [],
      color: '#F5BE15',
    },
    fixedValue: {
      name: '固定值',
      type: 'line',
      data: [],
      color: '#67DCAB',
    },
  };
  TIME_96.forEach((_, i) => {
    const v = hasDataTime(i, arr);
    // data.time.data.push(time);
    data.rateValue.data.push(v?.useType === 'dataSource' ? v?.rateValue ?? 100 : '-');
    data.maxValue.data.push(v?.useType === 'dataSource' ? v?.maxValue ?? '0.000' : '-');
    data.minValue.data.push(v?.useType === 'dataSource' ? v?.minValue ?? '0.000' : '-');
    data.fixedValue.data.push(v?.useType === 'fixation' ? v?.fixedValue ?? '0.000' : '-');
  });
  for (let key in data) {
    series.push(data[key]);
  }
  return { ...options, series };
};
